<template>
  <div class="score">
    <el-dropdown :hide-on-click="false" @command="handleCommand">
      <span class="el-dropdown-link">
        {{title}}
        <i class="el-icon-caret-bottom"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="menul">
        <el-dropdown-item command="近期赛程（近两个月赛程）">近期赛程（近两个月赛程）</el-dropdown-item>
        <el-dropdown-item command="2019全球总决赛">2019全球总决赛</el-dropdown-item>
        <el-dropdown-item command="2019职业联赛">2019职业联赛</el-dropdown-item>
        <el-dropdown-item command="2019洲际系列赛">2019洲际系列赛</el-dropdown-item>
        <el-dropdown-item command="2019季中冠军赛">2019季中冠军赛</el-dropdown-item>
        <el-dropdown-item command="2019韩国职业联赛">2019韩国职业联赛</el-dropdown-item>
        <el-dropdown-item command="2019发展联赛">2019发展联赛</el-dropdown-item>
        <el-dropdown-item command="2018德玛西亚杯西安站">2018德玛西亚杯西安站</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div class="schedule-con">
      <div class="all_score">
        <ul class="cl score_arran">
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>1</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
          <li class="score_list">
            <div class="score_time">
              <span>已结束</span>
              <span>19:00</span>
              <span>10-27</span>
            </div>
            <div class="score_grade cl">
              <div class="score_grade_left fl">
                <div class="score_grade_left_top">
                  <img src="../../images/0 (1).png" alt />
                </div>
                <p>SKT</p>
              </div>
              <div class="score_grade_center fr">
                <div class="score_grade_left_top">
                  <img src="../../images/0.png" alt />
                </div>
                <p>SPY</p>
              </div>
              <div class="score_grade_right">
                <div class="score_grade_center_top">
                  <span>3</span>:
                  <span>1</span>
                </div>
                <div class="score_grade_center_bottom">
                  <a href="#">数据</a>
                  <a href="#">视频</a>
                </div>
              </div>
            </div>
            <p class="match-name over">
              <span>2019全球总决赛</span>
              <a>淘汰赛 八强 BO5</a>
            </p>
          </li>
        </ul>
      </div>
      <div class="btn_left" @click="to_left"></div>
      <div class="btn_right" @click="to_right"></div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    title: '2019全球总决赛'
  }),
  created () {},
  methods: {
    handleCommand (command) {
      this.title = command
    },
    to_left () {
      let arran = document.getElementsByClassName('score_arran')[0]
      arran.style.left = arran.offsetLeft + -226.5 + 'px'
      if (Math.abs(arran.offsetLeft) > arran.offsetWidth - 453) {
        arran.style.left = -arran.offsetWidth + 453 + 'px'
      }
    },
    to_right () {
      let arran = document.getElementsByClassName('score_arran')[0]
      arran.style.left = arran.offsetLeft + 226.5 + 'px'
      if (arran.offsetLeft >= 0) {
        arran.style.left = 0 + 'px'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.score {
  .schedule-con {
    width: 1360px;
    height: 170px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 40px;
    .all_score {
      width: 1360px;
      height: 170px;
      position: relative;
      overflow: hidden;
      .score_arran {
        position: absolute;
        left: 0px;
        top: 0px;
      }
    }
  }
  .btn_left {
    position: absolute;
    height: 52px;
    width: 26px;
    left: -60px;
    top: 70px;
    font-size: 30px;
    cursor: pointer;
    background: url("../../images/sprite-img.png");
    text-align: center;
    line-height: 52px;
    opacity: 0.35;
  }
  .btn_right {
    opacity: 0.35;
    position: absolute;
    height: 52px;
    width: 26px;
    right: -60px;
    top: 70px;
    font-size: 30px;
    cursor: pointer;
    background: url("../../images/sprite-img.png");
    text-align: center;
    line-height: 52px;
    background-position: -28px 0;
  }
  ul {
    width: 1360px;
    height: 170px;
    overflow: hidden;
  }
  width: 100%;
  background: #f7f7f7;
  .score_list {
    height: 170px;
    width: 220px;
    background: #fff;
    margin-right: 6.5px;
    float: left;
    .score_time {
      height: 28px;
      width: 100%;
      background: url("../../images/gamelist-top-ware.png");
      background-color: #b2b2b2;
      line-height: 28px;
      color: aliceblue;
      font-weight: bold;
    }
    .score_time span:nth-child(1) {
      float: left;
    }
    .score_time span:nth-child(2) {
      float: right;
      margin-right: 6px;
    }
    .score_time span:nth-child(3) {
      float: right;
      margin-right: 12px;
    }
    .score_grade {
      .score_grade_left {
        padding-top: 10px;
        height: 80px;
        width: 64px;
        .score_grade_left_top {
          height: 50px;
          width: 50px;
          margin: auto;
          img {
            height: 100%;
            width: 100%;
          }
        }
        p {
          line-height: 30px;
          text-align: center;
        }
      }
      .score_grade_center {
        padding-top: 10px;
        height: 80px;
        width: 64px;
        .score_grade_left_top {
          height: 50px;
          width: 50px;
          margin: auto;
          img {
            height: 100%;
            width: 100%;
          }
        }
        p {
          line-height: 30px;
          text-align: center;
        }
      }
      .score_grade_right {
        padding-top: 10px;
        height: 80px;
        overflow: hidden;
        .score_grade_center_top {
          width: 100%;
          height: 40px;
          font-size: 34px;
          color: #0febc1;
          line-height: 40px;
          text-align: center;
          span {
            height: 40px;
            width: 34px;
            background: #3b3b3b;
            display: inline-block;
            border-radius: 5px;
          }
        }
        .score_grade_center_bottom {
          width: 100%;
          height: 22px;
          a {
            display: inline-block;
            color: #1da6ba;
            font-size: 14px;
            text-align: center;
            border: 1px solid #1da6ba;
            margin-top: 10px;
            margin-left: 8px;
            padding: 2px;
          }
          a:nth-of-type(2) {
            color: #bb9a6c;
            border-color: #bb9a6c;
          }
        }
      }
    }
    .match-name {
      font-size: 12px;
      color: #727272;
      margin-top: 15px;
      padding-top: 3px;
      width: 100%;
      text-align: center;
      position: relative;
      span {
        margin-right: 4px;
        font-weight: 700;
      }
      a {
        font-size: 12px;
        color: #727272;
      }
    }
  }
}
</style>
<style  scoped>
.score >>> .el-dropdown-link {
  cursor: pointer;
  color: #7ea1a6;
  size: 200px;
  border: 1px solid #ddd !important;
  display: inline-block;
  height: 43px;
  width: 227px;
  line-height: 43px;
  margin-left: 30px;
  font-size: 16px;
  background-color: #fff;
  padding-left: 20px;
  position: relative;
  margin-top: 34px;
  margin-bottom: 12px;
}
.score >>> .el-icon-caret-bottom {
  position: absolute;
  top: 15px;
  left: 218px;
  color: aquamarine;
}
.menul >>> .el-dropdown-menu__item {
  color: #7ea1a6;
  width: 190px;
}
.menul >>> .el-dropdown1 {
  font-size: 16px;
  background-color: #fff;
}
.score {
  text-align: left;
}
</style>
